import { Checkbox, Flex, Form, Select } from "antd";
import type { GetProp , CheckboxProps } from 'antd';
import style from '../css/BasicSettings.module.scss'
function BasicSettings() {
    const [form] = Form.useForm();
    // 复选组合
    const options = [
        { label: '按天排班', value: '按天排班' },
        { label: '按周排班', value: '按周排班' },
        { label: '按月排班', value: '按月排班' },
    ];
    const onChange: GetProp<typeof Checkbox.Group, 'onChange'> = (checkedValues) => {
        console.log('排班方式 = ', checkedValues);
    };
    // 预约时段配置
    const handleChange = (value: string) => {
        console.log(`预约时段 ${value}`);
    };
    // 加号配置
    const Checkboxs: CheckboxProps['onChange'] = (e) => {
        console.log(`加号 = ${e.target.checked}`);
    };
    // 停诊通知
    const close: CheckboxProps['onChange'] = (e) => {
        console.log(`停诊 = ${e.target.checked}`);
    };
    // 通知方式
    const notices = [
        { label: '短信', value: '短信' },
        { label: '微信小程序订阅消息', value: '微信小程序订阅消息' },
        { label: '支付宝小程序订阅消息', value: '支付宝小程序订阅消息' },
    ]
    const noticetype: GetProp<typeof Checkbox.Group, 'onChange'> = (checkedValues) => {
        console.log('noticetype = ', checkedValues);
    };
    return ( 
        <>
            <Form
                form={form} 

            >
                <Form.Item label='排班方式' className={style.itemstyle}>
                    <Checkbox.Group options={options} defaultValue={['按天排班','按周排班','按月排班']} onChange={onChange} />
                </Form.Item>
                <Form.Item label='预约时段配置' className={style.itemstyle}>
                    <Flex align="center">
                        <span>以</span>
                        <Select
                            defaultValue="1"
                            style={{ width: 80 ,height:32,margin:'0 20px'}}
                            onChange={handleChange}
                            options={[
                                { value: '1', label: '1' },
                                { value: '2', label: '2' },
                                { value: '0.5', label: '0.5' },
                                { value: '0', label: '0' },
                            ]}
                        />
                        <span>小时为一预约时段并平均分配号源(0为不分段，按整段时间预约，例如上午08:00-12:00)</span>
                    </Flex>
                </Form.Item>
                <Form.Item label='加号配置' className={style.itemstyle}>
                    <Checkbox onChange={Checkboxs} defaultChecked>开启加号配置</Checkbox>
                </Form.Item>
                <Form.Item label='停诊通知' className={style.itemstyle}>
                    <Checkbox onChange={close}>医生停诊后，推送停诊消息给已预约的患者</Checkbox>
                </Form.Item>
                <Form.Item label='通知方式' className={style.itemstyle}>
                    <Checkbox.Group options={notices} defaultValue={['Pear']} onChange={noticetype} />
                </Form.Item>
            </Form>
        </>
     );
}

export default BasicSettings;